<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <!-- 使用网络资源的相对路径，引入easyui库到页面中 -->
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.9.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.9.5/themes/icon.css">
	<script type="text/javascript" src="../js/jquery-easyui-1.9.5/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>

<!-- html是超文本标记语言 ，用于定义一个静态网页页面，可以实现图文排版技术-->
<!-- 常用的布局技术有table表格布局，和div块布局方式 -->
<!-- ajax异步动态加载数据 -->
<!-- 数据数据列表   --start -->
<!-- easyui支持多模块打开，为了解决页面组件名称冲突问题，把所有组件的id加上一个模块的标志 -->
<table id="user_dg" title="系统用户管理" class="easyui-datagrid" style="width:100%;height:600px;"
		url="../usermessage/list"
		toolbar="#user_toolbar"
		rownumbers="true" pagination=true  fitColumns="true" singleSelect="true">
	<thead>
		<tr>
			<th field="userNo" width="50">用户编号</th>
			<th field="userName" width="50">用户账号</th>
			<th field="nickName" width="50">昵称</th>
			<th field="password" width="50">密码</th>
			<th field="userPhone" width="50">电话</th>
			<th field="userEmail" width="50">邮箱</th>
			<th field="userDate" width="50">注册时间 </th>
		</tr>
	</thead>
</table>
<div id="user_toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
</div>
<!-- 数据数据列表   --end -->

<!-- 数据数据新增修改对话框   --start -->
<div id="user_dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
		closed="true" buttons="#user_dlg-buttons">
	<div class="ftitle">管理员管理</div>
	<form id="user_fm" method="post">
		<div class="fitem">
			<label>用户账号:</label>
			<input name="userName" class="easyui-validatebox" required="true">
		</div>
		<div class="fitem">
			<label>用户昵称:</label>
			<input name="nickName" class="easyui-validatebox" required="true">
		</div>
		<div class="fitem">
			<label>用户密码:</label>
			<input name="password">
		</div>
		
		<div class="fitem">
			<label>用户电话:</label>
			<input name="userPhone" class="easyui-validatebox" >
		</div>
		
		<div class="fitem">
			<label>用户邮箱:</label>
			<input name="userEmail" class="easyui-validatebox" validType="email">
		</div>
		
		<div class="fitem">
			<label>注册时间:</label>
			<input name="userDate" class="easyui-validatebox" >
		</div>
		
	</form>
</div>
<div id="user_dlg-buttons">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" 
	   onclick="javascript:$('#user_dlg').dialog('close')">取消</a>
</div>
<!-- 数据数据新增修改对话框   --end -->


<script type="text/javascript">

function newUser(){
	$('#user_dlg').dialog('open').dialog('setTitle','新增用户');
	$('#user_fm').form('clear');
	url = '../usermessage/add';
}

function editUser(){
	var row = $('#user_dg').datagrid('getSelected');
	if (row){
		$('#user_dlg').dialog('open').dialog('setTitle','修改用户');
		$('#user_fm').form('load',row);
		url = '../usermessage/edit?userNo='+row.userNo;
	}
}


function saveUser(){
	$('#user_fm').form('submit',{
		url: url,
		onSubmit: function(){
			return $(this).form('validate');
		},
		success: function(result){
			var result = eval('('+result+')');
			
			$.messager.show({
				title: 'Error',
				msg: result.errorMsg
			});
			
			$('#user_dlg').dialog('close');		// close the dialog
			$('#user_dg').datagrid('reload');	// reload the user data
		}
	});
}

function destroyUser(){
	var row = $('#user_dg').datagrid('getSelected');
	if (row){
		$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
			if (r){
				$.post('../usermessage/delete',{userNo:row.userNo},function(result){
					if (result.success){
						$('#user_dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.show({	// show error message
							title: 'Error',
							msg: result.errorMsg
						});
					}
				},'json');
			}
		});
	}
}

</script>

</body>
</html>